<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>生活圈-详情</title>
		<script type="text/javascript" src="js/rem.js"></script>
		<link rel="stylesheet" href="./css/swiper-4.3.3.min.css">
		<link rel="stylesheet" type="text/css" href="css/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/lifeCircle_detail.css" />
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
			
			.weui-toast {
				font-size: 0.14rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak class="box">
			<broadcast-swiper :broadcast="broadcast"></broadcast-swiper>
			<div class="lifeca">
				<div class="lifeca_left">
					<div class="lifeca_left_img">
						<img :src="headimg" />
					</div>
					<div class="lifeca_left_txt">
						<div class="lifeca_left_txt_name">
							{{nickname}}
						</div>
						<div class="lifeca_left_txt_time">
							{{sendtime}}
						</div>
					</div>
				</div>
				<div class="lifeca_right">关注</div>
			</div>

			<div class="lifecb">
				{{content}}
			</div>

			<div class="lifecd">
				<div @click="address" class="lifecd_inner">
					<img class="lifecd_inner1" src="images/location.png" />
					<div class="lifecd_inner2">{{address}}</div>
					<img class="lifecd_inner3" src="images/arrow.png" />
				</div>
			</div>

			<div class="lifece">
				<div class="lifece_a">
					共 {{comments.length}}条评论
				</div>
				<div v-for="(item,index) in comments" class="lifece_b">
					<div class="lifece_b_img">
						<img :src="item.headimg" />
					</div>
					<div class="lifece_b_info">
						<p class='title'>{{item.nickname}}</p>
						<p @click="comClick(item.nickname,index)" class='msg'>{{item.textdetail}}</p>
						<p class='day'>
							<span>{{item.time}}</span>
							<span v-if="item.replys.length>0" class="day_open">展开&nbsp;↓</span>
						</p>
						<div class='reply'>
							<p v-for="(reply,Rindex) in item.replys">
								<span class="reply_name">{{reply.newname}}</span>
								<span>回复</span>
								<span class="reply_name"> {{reply.oldname}}：</span>
								<span @click="replyClick(reply.newname,Rindex)">{{reply.textdetail}}</span>
							</p>
							<p class="reply_close">↑&nbsp;收起</p>
						</div>
					</div>
				</div>

			</div>
			<div class="kong"></div>
			<div class="lifecf">
				<img class="lifecf_img" src="images/z_edit.png" />
				<input id="inputValue" placeholder="喜欢的话，有想法就说" />
				<button @click="sendbtn" class="lifecf_send">发送</button>
			</div>

		</div>
	</body>
	<script type="text/javascript" src="js/vue2.5.16.js"></script>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-weui.min.js"></script>
	<script src="js/swiper-4.3.3.min.js"></script>
	<script src='./js/broadcast.js'></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
                broadcast: [
                    "./images/banner.png",
                    "./images/banner2.png"
                ],
				headimg: 'images/img1.png',
				nickname: '精致的猪猪女孩',
				sendtime: '昨天',
				content: '好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵好吃不贵',
				address: '苏州好百年商业广场',
				whovalue: false,  //判断是评论false  还是回复true
				comments: [{
					headimg: 'images/img1.png',
					nickname: '李雷',
					textdetail: '评论评论评论评论评论评论评论评论评论评论评论评论',
					time: '今天',
					replys: [{
						newname: "韩梅梅",
						oldname: '李雷',
						textdetail: '评论评论评论评论评论评论评论评论评论评论评论评论'
					}]
				}]

			},

			methods: {
				//点击评论
				comClick: function(nickname,index) {
					this.whovalue = true;
					$('#inputValue').focus();
					$('#inputValue').attr('placeholder', "回复 " + nickname + '：');
				},
                address:function () {
					$.toast('待开发','text')
                },
				//点击评论下的回复
				replyClick: function(newname,index) {
					this.whovalue = true;
					$('#inputValue').focus();
					$('#inputValue').attr('placeholder', "回复 " + newname + '：');
				},

				//发送
				sendbtn: function() {
					var inputValue = $('#inputValue').val();
					console.log(inputValue);
					if(inputValue.trim() == '') {
						$.toast("请先输入内容", "text");
					}else if (this.whovalue == false) {
						console.log('评论');
					} else if (this.whovalue == true) {
						console.log('回复');
					}
				}

			}
		})

		//关注
		var isfollow = false;
		$('.lifeca_right').click(function() {
			isfollow = !isfollow;
			var that = this;
			if(isfollow) {
				$(that).addClass('lifeca_right_cheak');
				$(that).text('已关注');
				$.toast('关注成功');
			} else {
				$.confirm({
					title: '',
					text: '确定要取消关注吗',
					onOK: function() {
						//点击确认
						$(that).removeClass('lifeca_right_cheak');
						$(that).text('关注');
					},
					onCancel: function() {
						isfollow = !isfollow;
					}
				})
			}
		})

		//展开评论
		$('.day_open').click(function() {
			$(this).hide();
			$(this).parent().next('.reply').show();
		})

		//收起
		$('.reply_close').click(function() {
			$(this).parent().prev().find('.day_open').show();
			$(this).parent().hide();
		})
	</script>

</html>